<template>
		<u-popup :show="show" :round="18" mode="bottom" @close="handleClose">
			<view class="slot-content" style="position: relative;margin: 0 24rpx;">
				<view class="modal-close" @click="handleClose">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<view class="modal-title">选择标签</view>
				
				<view class="tabs">
					<view class="tab-item" @click="handleClick('1')">
						<image :src="isWork === '1' ? 'https://static.wddzq.com/static/check_y.png' : 'https://static.wddzq.com/static/check_b.png'"></image>
						<text>全年营业</text>
					</view>
					<view class="tab-item" @click="handleClick('2')">
						<image :src="isWork === '2' ? 'https://static.wddzq.com/static/check_y.png' : 'https://static.wddzq.com/static/check_b.png'"></image>
						<text>暂停营业</text>
					</view>
				</view>
				
				<view class="tags-contaner" v-if="isWork === '1'">
					<view class="tags-title">营业日</view>
					<view class="tags-content">
						<view class="tags-item" v-for="(item, index) in workTimeList" :key="item.id" :class="getClass(item, index)" @click="handleTagClick(item.id)">
							{{item.name}}
							<image v-if="workId === item.id" src="https://static.wddzq.com/static/selected.png"></image>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="tags-footer">
				<u-button class="btn" @click="handleSubmit" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 88rpx;background-color: #030303;color: #fff;" color="#fff">
					<text>确定</text>
				</u-button>
			</view>
		</u-popup>
</template>

<script>
	import { to } from '../../../config/utils.js';
	
	export default {
		name: 'tuiOpenTimeModal',
		emits: ['close', 'submit'],
		data() {
			return {
				isWork: '1',		// 1 => 全年营业，2 => 暂停营业 
				workTime: '1',
				workId: '',
				workTimeList: [
					{
						id: '1',
						name: '工作日 8:00 - 18:00'
					},
          {
            id: '2',
            name: '工作日 8:00 - 22:00'
          },
          {
            id: '3',
            name: '工作日 6:00 - 18:00'
          },
          {
            id: '4',
            name: '工作日 10:00 - 22:00'
          },
          {
            id: '5',
            name: '工作日 10:00 - 22:00'
          },
          {
            id: '6',
            name: '全年 24小时'
          },
          {
            id: '7',
            name: '全年 8:00 - 20:00'
          },
          {
            id: '8',
            name: '具体时间电话咨询'
          },
				]
			}
		},
		watch: {
			show(val, oldVal) {
				console.log(val, oldVal);
			},
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			getClass(item, index) {
				let className = '';
				if(this.workId === item.id) {
					className = 'active';
				}
				if(index%2 === 0) {
					className += ' left';
				}
				
				return className;
			},
			handleClick(type) {
				this.isWork = type;
			},
			handleTagClick(id) {
				this.workId = id;
			},
			handleClose() {
				this.$emit('close');
			},
			handleSubmit() {
				if(this.isWork === '1' && !this.workId)  {
					return uni.showToast({
						title: '请选择营业日',
						icon: 'none'
					})
				}
				
				this.$emit('submit', {
					isWork: this.isWork,
					workTime: this.workTimeList.find(item => item.id === this.workId)
				});
				this.$emit('close');
			},
		}
	}
</script>

<style>

/* 弹窗 */
.modal-close {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -24rpx;
}
.modal-title {
	height: 40rpx;
	font-size: 36rpx;
	font-weight: 500;
	color: #333333;
	line-height: 40rpx;
	padding: 20rpx 0rpx;
}

.tags-contaner {
	min-height: 300rpx;
	max-height: 600rpx;
	overflow-y: auto;
}
.tags-content {
	display: flex;
	flex-wrap: wrap;
}
.tags-title {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 36rpx;
	margin-bottom: 24rpx;
}
.tags-item.left {
	margin-left: -24rpx;
}
.tags-item {
	width: 50%;
	/* flex: 1; */
	height: 64rpx;
	line-height: 64rpx;
	background: #F2F2F2;
	border-radius: 8rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #666666;
	text-align: center;
	margin: 0 0 16rpx 24rpx;
	position: relative;
}
.tags-item image {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 32rpx;
	height: 32rpx;
}
.tags-item.active {
	background: rgba(255,143,31,0.1);
}

.tags-footer {
	padding: 24rpx;
	padding-bottom: 50rpx;
	border-top: 1rpx solid #ddd;
}

.tabs {
	display: flex;
	border-bottom: 1rpx solid #EEEEEE;
	margin-top: 40rpx;
	margin-bottom: 32rpx;
	padding-bottom: 32rpx;
}
.tabs .tab-item {
	display: flex;
	align-items: center;
	margin-right: 48rpx;
}
.tab-item image {
	width: 36rpx;
	height: 36rpx;
	margin-right: 16rpx;
}
.tab-item text {
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
}
</style>
